/**
 * @Title: evaluation-plan-modal.js
 * @Description: evaluation-plan-modal
 * @author: Fanchao
 * @date: 2020/8/25 1:20 上午
 * @version V1.0
 */
import React from 'react';
import { Form, Input, Button, Space, Modal, message } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { connect } from 'umi';

const EvaluationPlanModal = ({ questions: { evaluationPlanModalVisible, title, itemData }, dispatch }) => {
    const [form] = Form.useForm();
    form.setFieldsValue({
        planName: itemData.evaluatePlanName,
        planDetailMsgList: itemData.planDetailModelList,
    });
    const onFinish = values => {
        values.evaluatePlanId = title === '新增方案浏览' ? 0 : itemData.evaluatePlanId;
        if (!values.planDetailMsgList) {
            message.warning('请添加选项与分数');
            return;
        }
        dispatch({
            type: 'questions/addEvaluatePlan',
            payload: values,
            callback: (result) => {
                if (result) {
                    form.resetFields();
                    dispatch({
                        type: 'questions/setEvaluationPlanModal',
                        payload: false,
                    });
                    dispatch({
                        type: 'questions/getEvaluatePlanList',
                        payload: {
                        },
                    });
                }
            },
        });
    };
    return (
        <Modal
            title={title}
            visible={evaluationPlanModalVisible}
            width={720}
            footer={null}
            onCancel={() => {
                dispatch({
                    type: 'questions/setEvaluationPlanModal',
                    payload: false,
                });
                form.resetFields();
            }}
        >
            <Form
                form={form}
                name="dynamic_form_nest_item"
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item
                    name="planName"
                    rules={[{ required: true, message: '必填' }]}
                >
                    <Input placeholder="请输入方案名称"/>
                </Form.Item>
                <Form.List name="planDetailMsgList">
                    {(fields, { add, remove }) => {
                        return (
                            <div>
                                {
                                    fields.map((field, sort) => (
                                        <Space key={field.key}
                                               style={{ display: 'flex', marginBottom: 8 }}
                                               align="start"
                                        >
                                            <Form.Item
                                                {...field}
                                                name={[field.name, 'optionContent']}
                                                fieldKey={[field.fieldKey, 'optionContent']}
                                                rules={[{ required: true, message: '必填' }]}
                                            >
                                                <Input placeholder="请输入选项"/>
                                            </Form.Item>
                                            <Form.Item
                                                {...field}
                                                name={[field.name, 'score']}
                                                fieldKey={[field.fieldKey, 'score']}
                                                rules={[{ required: true, message: '必填' }]}
                                            >
                                                <Input placeholder="请输入分数"/>
                                            </Form.Item>
                                            <Form.Item
                                                {...field}
                                                hidden
                                                initialValue={{ sort: sort }}
                                            >
                                                <Input/>
                                            </Form.Item>
                                            <MinusCircleOutlined
                                                onClick={() => {
                                                    remove(field.name);
                                                }}
                                            />
                                        </Space>
                                    ))
                                }
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        onClick={() => {
                                            add();
                                        }}
                                        block
                                    >
                                        <PlusOutlined/> 添加
                                    </Button>
                                </Form.Item>
                            </div>
                        );
                    }}
                </Form.List>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        确定
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default connect(({ questions, dispatch }) => ({
    questions,
    dispatch,
}))(EvaluationPlanModal);

